@import 'vars';
@import 'mixins';

/*
	Landed by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

$size-wrapper-pad-tb: 3.25em;
$size-wrapper-pad-lr: 1.5em;

/* Basic */

	body, input, select, textarea {
		font-size: 12pt;
	}

	h2 {
		font-size: 1.5em;
	}

	h3 {
		font-size: 1.2em;
	}

	h4 {
		font-size: 1em;
	}

/* Section/Article */

	header {
		p {
			br {
				display: none;
			}
		}

		h2 + p {
			font-size: 1em;
		}

		h3 + p {
			font-size: 1em;
		}

		h4 + p,
		h5 + p,
		h6 + p {
			font-size: 0.9em;
		}

		&.major {
			margin: 0 0 $size-element-margin 0;
		}
	}

/* Goto Next */

	.goto-next {
		&:before {
			height: 0.8em;
			margin: -0.4em 0 0 -0.6em;
			width: 1.2em;
		}
	}

/* Spotlight */

	.spotlight {
		box-shadow: 0 0.125em 0.5em 0 rgba(0,0,0,0.25);

		.image.main {
			max-height: 60vh;
		}

		.content {
			border-top-width: 0.2em !important;
			padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - $size-element-margin) $size-wrapper-pad-lr !important;
		}
	}

/* Wrapper */

	.wrapper {
		padding: $size-wrapper-pad-tb $size-wrapper-pad-lr ($size-wrapper-pad-tb - $size-element-margin) $size-wrapper-pad-lr;
	}

/* Header */

	#header {
		display: none;
	}

/* Banner */

	#banner {
		box-shadow: 0 0.125em 0.5em 0 rgba(0,0,0,0.25);
		min-height: calc(100vh - 44px);

		&:before {
			height: calc(100vh - 44px);
		}

		.content {
			padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr;

			header {
				h2 {
					font-size: 1.5em;
				}
			}

			.image {
				height: 9em;
				width: 9em;
			}
		}
	}

/* Layers */

	#skel-layers-wrapper {
		padding-top: 44px !important;
	}

	#titleBar {
		background: $color-accent2-bg;
		box-shadow: 0 0.125em 0.125em 0 rgba(0,0,0,0.125);

		.title {
			color: $color-fg-bold;
			display: block;
			font-weight: $font-weight-bold;
			height: 44px;
			line-height: 44px;
			text-align: center;
		}

		.toggle {
			@include icon;
			height: 60px;
			left: 0;
			position: absolute;
			top: 0;
			width: 90px;

			&:before {
				background: $color-accent1-bg;
				color: $color-fg-light;
				content: '\f0c9';
				display: block;
				font-size: 18px;
				height: 44px;
				left: 0;
				line-height: 44px;
				position: absolute;
				text-align: center;
				top: 0;
				width: 54px;
			}
		}
	}

	#navPanel {
		background: darken($color-bg, 2);
		padding: 0.75em 1.25em;

		.link {
			border: 0;
			border-top: solid 1px transparentize($color-border, 0.25);
			color: $color-fg;
			display: block;
			height: 3em;
			line-height: 3em;
			text-decoration: none;

			&:hover {
				color: inherit !important;
			}

			&:first-child {
				border-top: 0;
			}

			&.depth-0 {
				color: $color-fg-bold;
				font-weight: $font-weight-bold;
			}

			.indent-1 { display: inline-block; width: 1.25em; }
			.indent-2 { display: inline-block; width: 2.5em; }
			.indent-3 { display: inline-block; width: 3.75em; }
			.indent-4 { display: inline-block; width: 5em; }
			.indent-5 { display: inline-block; width: 6.25em; }
		}
	}

/* Footer */

	#footer {
		padding: $size-wrapper-pad-tb $size-wrapper-pad-lr;
	}